﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" content="chrome=1, IE=edge" http-equiv="X-UA-Compatible" />
  
    <title>WWT Web Client Fov</title>
    <script src="http://www.worldwidetelescope.org/webclient/sdk/wwtsdk.js"></script>	
    <script>

    // Create the WorldWide telescope object variable

    var wwt;

    // Create variables to hold the changeable settings

	var bShowCrosshairs = true;
	var bShowUI = true;
	var bShowFigures = true;

	// This function initializes the wwt object and registers the wwtReady event
	// once the initialization is done the wwtReady event will be fired
	function initialize() {
	    wwt = wwtlib.WWTControl.initControl("WWTCanvas");
	    wwt.add_ready(wwtReady);
	    wwt.add_arrived(wwtArrived);
	}

	function FovInc() {
	    var newFov = 1.1 * wwt.get_fov();
	    if (newFov <= 60) {
	        wwt.gotoRaDecZoom(wwt.getRA(), wwt.getDec(), newFov, false);
	    }
	}

	function FovDec() {
	    var newFov = wwt.get_fov() / 1.1;
	    if (wwt.get_fov() >= 0.00022910934437488727) {
	        wwt.gotoRaDecZoom(wwt.getRA(), wwt.getDec(), newFov, false);
	    }
	}

	function showFov() {
	    document.getElementById("currentfov").value = wwt.get_fov();
	}

	function wwtArrived() {
	    showFov();
	}
	
    // A simple function to toggle the settings
    // This function is called from the checkbox entries setup in the html table

	function toggleSetting(text) {
	    switch (text) {
	        case 'ShowUI':
	            bShowUI = !bShowUI;
	            wwt.hideUI(!bShowUI);
	            break;

	        case 'ShowCrosshairs':
	            bShowCrosshairs = !bShowCrosshairs;
	            wwt.settings.set_showCrosshairs(bShowCrosshairs);
	            break;

	        case 'ShowFigures':
	            bShowFigures = !bShowFigures;
	            wwt.settings.set_showConstellationFigures(bShowFigures);
	            break;
	    }
	}

    // A function to change the view to different constellations
    // This function is called from the button entries in the html table


	function GotoConstellation(text) {    
	    
	    switch (text) {
	        case 'Sagittarius':
	            wwt.gotoRaDecZoom(286.485, -27.5231666666667, 60, false);
	            break;

	        case 'Aquarius':
	            wwt.gotoRaDecZoom(334.345, -9.21083333333333, 60, false);
	            break;

	    }
	}

    // The wwtReady function is called by the WWT Web Control software
    // This function sets up the wwt object, and the initial defaults

	function wwtReady() {
	    wwt.settings.set_showCrosshairs(bShowCrosshairs);
	    wwt.settings.set_showConstellationFigures(bShowFigures);
	    wwt.hideUI(!bShowUI);

	    wwt.settings.set_showConstellationBoundries(true);

	    showFov();
	}

    </script>

</head>

<body onload="initialize()" >

<!-- The body section creates a table with two columns. The first contains the -->
<!-- WWTControl object that is the WWT web client. And the second a table within-->
<!-- the table, containing some buttons and checkboxes.-->

<table border="2" bgcolor="lightgrey">
	<tr><td>
        <div id="WorldWideTelescopeControlHost">
            <div id="WWTCanvas" style="width: 750px; height: 750px; border-style: none; border-width: 0px;">
            </div>
    </div>
	</td><td>

	<table border="2" cellspacing="4" cellpadding="4" bgcolor="gold">
	
	<tr>
	<th colspan="2"><h2>WWT Web Client Fov</h2></th>
	</tr>
			
	<tr>
	<th colspan = "2"> 
	<input type="button" id="Sagittarius" value="Goto Sagittarius" onclick="GotoConstellation('Sagittarius')"/>
	<input type="button" id="Aquarius" value="Goto Aquarius" onclick="GotoConstellation('Aquarius')"/></th>		
	</tr>

	<tr>
	<th colspan = "2">Settings</th>
	</tr>
	
<!--	<tr>
		<td> Show UI </td>
		<td> <input id="UI" type="checkbox" checked="checked" onclick="toggleSetting('ShowUI');"/></td>

	</tr>-->
	
	<tr>
		<td> Show Crosshairs</td>
		<td> <input id="Crosshairs" type="checkbox" checked="checked" onclick="toggleSetting('ShowCrosshairs');"/></td>

	</tr>

	<tr>
		<td> Show Figures </td>
		<td> <input id="Figures" type="checkbox" checked="checked" onclick="toggleSetting('ShowFigures');"/></td>

	</tr>
	
		<tr>
	<th colspan = "2">Field of View</th>
	</tr>
	
		<tr>
		<td>Current value: </td>
		<td> <input id="currentfov" type="text" value="~"/></td>
	</tr>
	
	<tr>
	<th colspan = "2"> 
	<input type="button" id="inc" value="Inc Fov" onclick="FovInc()"/>
	<input type="button" id="dec" value="Dec Fov" onclick="FovDec()"/></th>		
	</tr>

</table>
</td>
</tr>
</table>

</body>
</html>
